<template>
  <div class="bind panel animated" :class="!isBind?'fadeIn':'fadeOut'" v-if="!isBind">
    <div class="dialog-panel">
      <ul class="content">
        <li>绑定江西联通,方可</li>
        <li>为您赠送奖品</li>
        <li class="bind-btn" @click.passive="toBind"></li>
      </ul>
      <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  },
  props: {
    isBind: {
      type: Boolean,
      required: true
    },
    queryData: {

    }
  },
  methods: {
    toBind() {
      if (null === this.queryData) {
        location.href = `http://wxjx.unisk.cn/wxjx/food/common/user/tB`;
      } else {
        location.href = `http://wxjx.unisk.cn/wxjx/food/common/user/tSB?uC=${this.queryData.uC}&mC=${this.queryData.mC}`;
      }
    }
  },
}
</script>
<style lang="less" scoped>
.bind {
  .dialog-panel {
    width: 588px;
    height: 592px;
    overflow: hidden;
    background: url("../assets/images/dialog-panel.png") no-repeat;
    background-size: 588px 592px;

    ul {
      margin: 90px 0;
      padding: 0 100px;
      width: 588px;
      height: 412px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      li {
        letter-spacing: 0.2em;
        line-height: 1.5em;
        font-weight: bold;
        color: #fff;
        font-size: 35px;
      }
      .bind-btn {
        margin-top: 100px;
        width: 405px;
        height: 83px;
        background: url("../assets/images/bind-btn.png") no-repeat center center;
        background-size: 90%;
      }
    }
  }
}
</style>
